<template>
  <div v-for="tagItem in tags">

    <span v-if="tagItem.tagType === 'text' && tagItem.label"
          :key="tagItem.value"
          :style="{color: tagItem.color,borderColor: tagItem.borderColor,background:tagItem.background,borderRadius:tagItem.borderRadius}">
      {{ blankStr(tagItem.label) }}
    </span>

    <el-tag class="pointer"
            v-else-if="tagItem.tagType !== 'text' && tagItem.label"
            :disable-transitions="true"
            :key="tagItem.value"
            :index="tagItem.value"
            :type="tagItem.type"
            :round="tagItem.round"
            :style="{color: tagItem.color,borderColor: tagItem.borderColor,background:tagItem.background,borderRadius:tagItem.borderRadius}">
      {{ blankStr(tagItem.label) }}
    </el-tag>

    <span v-else style="color: #bb8737">未 知</span>

  </div>
</template>

<script setup>
import {defineProps, ref, watch} from "vue";
import {blankStr} from "../utils/kit";

const tags = ref([
  {
    tagType: '',
    label: '',
    value: '',
    type: '',
    round: false,
    color: '',
    borderColor: '',
  }
])

const props = defineProps({
  options: {
    type: Array,
    default: []
  },
  //value: 1 / "2" / "1,2,3"
  value: {
    type: [Number, String],
    default: ""
  }
});

watch(() => props.value, (newVal, oldVal) => {
  // console.log(" props.value, ", newVal)
  refreshItems(newVal)
})

//页面加载完成回调
onMounted(() => {
  // console.log("  页面加载完成回调 ")

  nextTick(() => {
    refreshItems(props.value);
  })

})

function refreshItems(values) {
  let tagList = [];
  // console.log("  refreshItems(values) ", values)

  values.split(",").forEach(value => {
    // console.log("  value -- value  ", value)

    props.options.forEach(option => {
      if (option.value == value) {
        tagList.push(option)
      }
    })

  })

  tags.value = tagList;

}

</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>